<!doctype html>
<title>Custom button</title>

<style>

button
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #fff;
	padding: 10px 20px;
	border: 2px solid #000;
	cursor: pointer;
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;	
	
	background:-webkit-linear-gradient(top, #a3a3a3, #000);
	background:-moz-linear-gradient(top, #a3a3a3, #000);
	background: linear-gradient(top, #a3a3a3, #000);
	
	-webkit-box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
	box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
	
	-webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

button:hover
{
  background: -webkit-linear-gradient(top, #acc7a3, #506651);
  background: -moz-linear-gradient(top, #acc7a3, #506651);
  background: linear-gradient(top, #acc7a3, #506651);
}

button:active
{
  background: -webkit-linear-gradient(top, #858565, #c5c9a9);
  background: -moz-linear-gradient(top, #858565, #c5c9a9);
  background: linear-gradient(top, #858565, #c5c9a9);
}

</style>

<button>guess</button>
	